<script setup lang="ts" name="CCParentPage_Attrs">
import { ref } from "vue";
import Child from "./Child.vue";

const a = ref(1);
const b = ref(2);
const c = ref(3);
const d = ref(4);
</script>

<template>
  <div class="bg-sky-100 p-6">
    <h2 class="text-xl">父组件</h2>
    <ul>
      <li>a: {{ a }}</li>
      <li>b: {{ b }}</li>
      <li>c: {{ c }}</li>
      <li>d: {{ d }}</li>
    </ul>
    <!-- <Child :a="a" :b="b" :c="c" :d="d" v-bind="{ x: 100, y: 200 }" /> -->
    <Child v-bind="{ a, b, c, d, x: 100, y: 200 }" />
  </div>
</template>
